<template>
    <div class="app-container">
        <el-row :gutter="20">
            <splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">
                <!--区域数据-->
                <pane size="16">
                    <el-col>
                        <div class="head-container">
                            <el-input v-model="areaName" placeholder="请输入区域名称" clearable size="small"
                                prefix-icon="el-icon-search" style="margin-bottom: 20px" />
                        </div>
                        <div class="head-container">
                            <el-tree :data="areaOptions" :props="defaultProps" :expand-on-click-node="false"
                                :filter-node-method="filterNode" ref="tree" node-key="id" default-expand-all
                                highlight-current @node-click="handleNodeClick" />
                        </div>
                    </el-col>
                </pane>
                <!--视频列表数据-->
                <pane size="84">
                    <el-col>
                        <el-row :gutter="10" class="mb8">
                            <el-row :gutter="10" class="mb8">
                                <div class="top-right-btn" style="margin-right: 5px">
                                    <el-row>
                                        <el-button :class="[gridSize == 4 ? 'clk-btn' : 'dft-btn']" size="mini"
                                            ref="defaultBtn" @click="setGrid(4)">四宫格</el-button>
                                        <el-button :class="[gridSize == 9 ? 'clk-btn' : 'dft-btn']" size="mini"
                                            @click="setGrid(9)">九宫格</el-button>
                                        <el-button :class="[gridSize == 16 ? 'clk-btn' : 'dft-btn']" size="mini"
                                            @click="setGrid(16)">十六宫格</el-button>
                                    </el-row>
                                </div>
                            </el-row>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="getColSpan" v-for="(video, index) in visibleVideos" :key="video.id">
                                <el-card shadow="hover" :class="getVideoCardClass">
                                    <!-- 实时视频流 -->
                                    <video :src="video.src" class="video-player" autoplay muted controls></video>
                                    <!-- 视频信息 -->
                                    <div class="video-info">
                                        <p :class="videoInfoClass(gridSize)">设备名称：{{ video.name }}</p>
                                        <p :class="videoInfoClass(gridSize)">定位信息：{{ video.location }}</p>
                                    </div>
                                </el-card>
                            </el-col>
                        </el-row>

                        <pagination layout="prev, pager, next" :total="total" :page.sync="queryParams.pageNum"
                            :limit.sync="queryParams.pageSize" @pagination="getList" />
                    </el-col>
                </pane>
            </splitpanes>
        </el-row>
    </div>
</template>

<script>
import { listVideo, areaTreeSelect } from "@/api/video/video";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";

export default {
    name: "111Video",
    dicts: ["sys_normal_disable", "sys_user_sex"],
    components: { Treeselect, Splitpanes, Pane },
    data() {
        return {
            // 遮罩层
            loading: true,
            // 显示搜索条件
            showSearch: true,
            areaName: undefined,
            // 总条数
            total: 4,
            videos: [],
            gridSize: 4, // 当前布局，默认 4 宫格
            // 视频表格数据
            videoList: [
                {
                    id: 1,
                    name: "设备1",
                    location: "位置A",
                    src: "https://www.w3schools.com/html/mov_bbb.mp4",
                },
                {
                    id: 2,
                    name: "设备2",
                    location: "位置B",
                    src: "https://www.w3schools.com/html/mov_bbb.mp4",
                },
                {
                    id: 3,
                    name: "设备3",
                    location: "位置C",
                    src: "https://www.w3schools.com/html/mov_bbb.mp4",
                },
                {
                    id: 4,
                    name: "设备4",
                    location: "位置D",
                    src: "https://www.w3schools.com/html/mov_bbb.mp4",
                },
                {
                    id: 5,
                    name: "设备5",
                    location: "位置E",
                    src: "https://www.w3schools.com/html/mov_bbb.mp4",
                },
                {
                    id: 6,
                    name: "设备6",
                    location: "位置F",
                    src: "https://www.w3schools.com/html/mov_bbb.mp4",
                },
                {
                    id: 7,
                    name: "设备7",
                    location: "位置G",
                    src: "https://www.w3schools.com/html/mov_bbb.mp4",
                },
                {
                    id: 8,
                    name: "设备8",
                    location: "位置H",
                    src: "https://www.w3schools.com/html/mov_bbb.mp4",
                },
                {
                    id: 9,
                    name: "设备9",
                    location: "位置I",
                    src: "https://www.w3schools.com/html/mov_bbb.mp4",
                },
                {
                    id: 10,
                    name: "设备10",
                    location: "位置J",
                    src: "https://www.w3schools.com/html/mov_bbb.mp4",
                },
                {
                    id: 11,
                    name: "设备11",
                    location: "位置K",
                    src: "https://www.w3schools.com/html/mov_bbb.mp4",
                },
                {
                    id: 12,
                    name: "设备12",
                    location: "位置L",
                    src: "https://www.w3schools.com/html/mov_bbb.mp4",
                },
                {
                    id: 13,
                    name: "设备13",
                    location: "位置M",
                    src: "https://www.w3schools.com/html/mov_bbb.mp4",
                },
                {
                    id: 14,
                    name: "设备14",
                    location: "位置N",
                    src: "https://www.w3schools.com/html/mov_bbb.mp4",
                },
                {
                    id: 15,
                    name: "设备15",
                    location: "位置O",
                    src: "https://www.w3schools.com/html/mov_bbb.mp4",
                },
                {
                    id: 16,
                    name: "设备16",
                    location: "位置P",
                    src: "https://www.w3schools.com/html/mov_bbb.mp4",
                },
            ],
            // 所有部门树选项
            areaOptions: [
                {
                    id: 100,
                    label: "区域名称A",
                    disabled: false,
                    children: [
                        {
                            id: 101,
                            label: "设备名称A",
                            disabled: false,
                        },
                        {
                            id: 102,
                            label: "设备名称B",
                            disabled: false,
                        },
                        {
                            id: 103,
                            label: "设备名称C",
                            disabled: false,
                        },
                        {
                            id: 104,
                            label: "设备名称D",
                            disabled: false,
                        },
                        {
                            id: 105,
                            label: "设备名称E",
                            disabled: false,
                        },
                    ],
                },
                {
                    id: 106,
                    label: "区域名称B",
                    disabled: false,
                    children: [
                        {
                            id: 107,
                            label: "设备名称a",
                            disabled: false,
                        },
                        {
                            id: 108,
                            label: "设备名称b",
                            disabled: false,
                        },
                        {
                            id: 109,
                            label: "设备名称c",
                            disabled: false,
                        },
                        {
                            id: 110,
                            label: "设备名称d",
                            disabled: false,
                        },
                    ],
                },
            ],
            // 过滤掉已禁用部门树选项
            enabledAreaOptions: undefined,
            defaultProps: {
                children: "children",
                label: "label",
            },
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 4,
            },
        };
    },
    watch: {
        // 根据名称筛选部门树
        areaName(val) {
            this.$refs.tree.filter(val);
        },
    },
    computed: {
        // 计算当前需要展示的视频
        visibleVideos() {
            this.videos = this.videoList.concat();
            this.queryParams.pageSize = this.gridSize;
            let len = this.videos.length;
            if (len < this.gridSize) {
                return this.videos.push(...Array(this.gridSize - len).fill({}));
            } else if (len > this.gridSize) {
                return this.videos.slice(0, this.gridSize);
            }
            return this.videos;
        },
        getVideoCardClass() {
            return function (index) {
                return [`video-card-${this.gridSize}`];
            };
        },
        // 根据宫格数量计算列宽
        getColSpan() {
            if (this.gridSize === 4) return 12; // 四宫格
            if (this.gridSize === 9) return 8; // 九宫格
            if (this.gridSize === 16) return 6; // 十六宫格
        },
        videoInfoClass() {
            return function (index) {
                return [`video-info-${this.gridSize}`];
            };
        },
    },
    created() {
        // this.getList();
        // this.getAreaTree();
    },
    mounted() {
        this.$refs.defaultBtn.$el.click();
    },
    methods: {
        // 设置宫格布局
        setGrid(size) {
            this.gridSize = size;
        },
        /** 查询视频列表 */
        getList() {
            this.loading = true;
            listVideo(this.addDateRange(this.queryParams, this.dateRange)).then(
                (response) => {
                    this.videoList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                }
            );
        },
        /** 查询部门下拉树结构 */
        getAreaTree() {
            areaTreeSelect().then((response) => {
                this.areaOptions = response.data;
                this.enabledAreaOptions = this.filterDisabledArea(
                    JSON.parse(JSON.stringify(response.data))
                );
            });
        },
        // 筛选节点
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        // 节点单击事件
        handleNodeClick(data) {
            this.queryParams.deptId = data.id;
            this.handleQuery();
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },

        // 过滤禁用的部门
        filterDisabledArea(areaList) {
            return areaList.filter((area) => {
                if (area.disabled) {
                    return false;
                }
                if (area.children && area.children.length) {
                    area.children = this.filterDisabledArea(area.children);
                }
                return true;
            });
        },
    },
};
</script>

<style scoped>
.video-card-4 {
    padding: 5px 5px 1.5rem 5px;
    height: 50vh;
    margin: 5px 0px 5px 0px;
}

.video-card-9 {
    padding: 5px 5px 1.5rem 5px;
    height: 30vh;
    margin: 5px 0px 5px 0px;
}

.video-card-16 {
    padding: 5px 5px 1.5rem 5px;
    height: 20vh;
    margin: 5px 0px 5px 0px;
}

.video-player {
    width: 100%;
    /* height: 180px; */
    object-fit: cover;
    background-color: black;
}

.video-info {
    padding: 0.125rem 0.0625rem 0.125rem 0.0625rem;
    display: flex;
    flex-flow: row wrap;
    align-content: space-between;
    justify-content: space-between;
}


.video-info-4 {
    font-size: 0.8rem;
}

.video-info-9 {
    font-size: 0.75rem;
}

.video-info-16 {
    font-size: 0.64rem;
}

.dft-btn {
    position: relative;
    text-align: center;
}

.clk-btn {
    position: relative;
    background: #67c7ff;
    text-align: center;
}
</style>







<template>
    <div :style="{ backgroundColor: backgroundColor }" class="home">
      <div  class="dashboard">
        <div class="section map-section">
          <img v-if="logo" :src="logo" class="map" />
        </div>
        <div class="section pie-section-1">
          <div class="title-info">
            <span class="title">计划完成率</span>
            <span class="unit">单位：%</span>
          </div>
          <div ref="myChart1" style="height: 100%; width: 100%;" />
        </div>
        <div class="section bar-section-1">
          <div class="title-info">
            <span class="title">缺陷样本库统计</span>
            <span class="unit">单位：个</span>
          </div>
          <div ref="myChart2" style="height: 100%; width: 100%;" />
        </div>
        <div class="section pie-section-2">
          <div class="title-info">
            <span class="title">巡检计划任务统计</span>
            <span class="unit">单位：个</span>
          </div>
          <div ref="myChart4" style="height: 100%; width: 100%;" />
        </div>
        <div class="section bar-section-2">
          <div class="title-info">
            <span class="title">巡检工单统计</span>
            <span class="unit">单位：个</span>
          </div>
          <div ref="myChart5" style="height: 100%; width: 100%;" />
        </div>
        <div class="section bar-section-3">
          <div class="title-info">
            <span class="title">巡检数据统计</span>
            <span class="unit">单位：个</span>
          </div>
          <div ref="myChart3" style="height: 100%; width: 100%;" />
        </div>
      </div>
  
    </div>
  </template>
  
  <script>
  import * as echarts from "echarts";
  import gis from "@/assets/images/gis.png";
  export default {
    name: "Index",
    data() {
      return {
        // 版本号
        version: "3.8.9",
        logo: gis,
        backgroundColor: '#EAECFC' // 背景颜色值
      };
    },
  
    mounted() {
      this.initChart1();
      this.initChart2();
      this.initChart3();
      this.initChart4();
      this.initChart5();
    },
    methods: {
      goTarget(href) {
        window.open(href, "_blank");
      },
      initChart1() {
        const myChart = echarts.init(this.$refs.myChart1);
        const option = {
          label: { show: true, formatter: "{c}" },
          xAxis: {
            type: "category",
            data: ["周完成率", "月完成率", "季完成率"]
          },
          yAxis: {
            type: "value"
          },
          grid: {
            bottom: "15%" // 调整grid的底部边距
          },
          series: [
            {
              data: [20, 100, 200],
              type: "bar"
            }
          ]
        };
  
        myChart.setOption(option);
      },
      initChart2() {
        const myChart = echarts.init(this.$refs.myChart2);
        const option = {
          label: { show: true, formatter: "{c}" },
          xAxis: {
            type: "category",
            data: ["工务", "通信", "供电", "综合", "信号"]
          },
          yAxis: {
            type: "value"
          },
          grid: {
            bottom: "15%" // 调整grid的底部边距
          },
          color: "green",
          series: [
            {
              data: [50, 55, 70, 60, 75],
              type: "bar"
            }
          ]
        };
  
        myChart.setOption(option);
      },
      initChart3() {
        const myChart = echarts.init(this.$refs.myChart3);
        const option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // Use axis to trigger tooltip
              type: "shadow" // 'shadow' as default; can also be 'line' or 'shadow'
            }
          },
          legend: {},
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          xAxis: {
            type: "value"
          },
          yAxis: {
            type: "category",
            data: ["工务", "供电", "通信"]
          },
          series: [
            {
              name: "风险",
              type: "bar",
              stack: "total",
              label: {
                show: true
              },
              emphasis: {
                focus: "series"
              },
              data: [320, 302, 301]
            },
            {
              name: "缺陷",
              type: "bar",
              stack: "total",
              label: {
                show: true
              },
              emphasis: {
                focus: "series"
              },
              data: [120, 132, 101]
            }
          ]
        };
  
        myChart.setOption(option);
      },
      initChart4() {
        const myChart = echarts.init(this.$refs.myChart4);
        const option = {
          tooltip: {
            trigger: "item"
          },
          legend: {
            top: "5%",
            orient: "vertical", // 垂直布局
            left: "left" // 设置图例位置为左侧
          },
  
          label: {
            show: true,
            position: "outside", // 或者 'inside'，根据需要调整
            formatter: "{c}" // 只显示数量（即值）
          },
          series: [
            {
              name: "巡检任务",
              type: "pie",
              radius: ["40%", "70%"],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: "#fff",
                borderWidth: 2
              },
  
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: "bold"
                }
              },
  
              data: [
                { value: 1048, name: "未巡检" },
                { value: 735, name: "巡检中" },
                { value: 580, name: "已完成" }
              ]
            }
          ]
        };
  
        myChart.setOption(option);
      },
      initChart5() {
        const myChart = echarts.init(this.$refs.myChart5);
        const option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // Use axis to trigger tooltip
              type: "shadow" // 'shadow' as default; can also be 'line' or 'shadow'
            }
          },
          legend: {},
          grid: {
            left: "3%",
            right: "4%",
  
            borderWidth: 0.1,
            containLabel: true
          },
          xAxis: {
            type: "value"
          },
          yAxis: {
            type: "category",
            data: ["信号", "综合服务"]
          },
          label: { show: true, formatter: "{b}: {c}" },
          series: [
            {
              name: "未完成",
              type: "bar",
              stack: "total",
              color: "red",
              label: {
                show: true
              },
              emphasis: {
                focus: "series"
              },
              data: [100, 200]
            },
            {
              name: "完成",
              type: "bar",
              stack: "total",
              label: {
                show: true
              },
              emphasis: {
                focus: "series"
              },
              data: [134, 90]
            }
          ]
        };
  
        myChart.setOption(option);
      }
    }
  };
  </script>
  
  <style scoped lang="scss">
  .home {
    height: 90vh;
  }
  .dashboard {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 0.8fr 1.2fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-auto-flow: row;
    grid-template-areas:
      "a a a a b"
      "a a a a c"
      "d d e e f";
    gap: 10px;
    height: 95%;
    padding: 20px 20px 30px 20px;
    box-sizing: border-box;
  }
  
  .section {
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #f9f9f9;
    padding: 8px;
  }
  
  .map {
    height: 100%;
    width: 100%;
    padding: 5px;
  }
  
  .map-section {
    grid-area: a;
  
  }
  
  .pie-section-1 {
    grid-area: b;
  }
  
  .bar-section-1 {
    grid-area: c;
  }
  
  .pie-section-2 {
    grid-area: d;
  }
  
  
  .bar-section-2 {
    grid-area: e;
  }
  
  .bar-section-3 {
    grid-area: f;
  }
  
  .title-info {
    display: flex;
    flex-flow: row wrap;
    align-content: space-between;
    justify-content: space-between;
  
    .title {
      font-size: 0.9rem;
      font-weight: bold;
    }
  
    .unit {
      font-size: 0.8rem;
    }
  }
  </style>
  